<template>
  <div class="about">
    <p>{{msg}}</p>
     <button @click="msg = '李四'">更改名字</button>
     <!-- <button @click="age++">更改年龄</button> -->



      <button @click="person.age++">更改年龄</button>
      <button @click="person.job.salary++">加薪</button>


  </div>
</template>
<script>
import {watch,watchEffect,ref,reactive} from 'vue'
export default {
   setup(props){
      const msg = ref('张三')
    //   const age = ref(18)
      const person = reactive({
          name:'zs',
          age:18,
          job:{
            salary:20000
          }
      })
    //   监听ref类型的数据
    // 第一个参数 你要监听的数据
    // 第二个参数 是一个回调函数  第一个参数是新值 第二个参数是老值
    // 第三个参数  对象的形式  {deep:false/true} 是否开启深度监听   或者immediate :false / true  是否立即监听
    // watch(msg,(newVal,oldVal)=>{
    //     console.log('新值'+newVal, '老值'+oldVal);
    // })
    //  watch(age,(newVal,oldVal)=>{
    //     console.log('新值'+newVal, '老值'+oldVal);
    // })

    // 监听多个值的变化   第一个参数用数组的形式
    // watch([msg,age],(newVal,oldVal)=>{
    //         console.log('新值'+newVal, '老值'+oldVal);
    // })

    // watch监听reactive类型
    // 当监听的是对象里面的某个属性的时候  第一个参数必须是函数返回值ed形式return 出去
    // watch(()=>person.age,(newVal,oldVal)=>{
    //     console.log('新值'+newVal, '老值'+oldVal);

    // })
    // 如果监听对象的时候，必须开启深度监听    监听reactive类型的数据，无法正常获取到老值
    //  watch(()=>person.job,(newVal,oldVal)=>{
    //     console.log('新值'+newVal, '老值'+oldVal);

    // },{deep:true})
    // watchEffect  不需要传入监听对象 ，只要页面数据发生变化，就会触发监听
    // 一进入页面就会指定监听回调，没有办法获取到老值
    watchEffect(()=>{
        // console.log(msg.value);
        // console.log(person.age);
        // console.log(person.job.salary);
       console.log('我会触发监听吗？？？？');
    })

      return  {person,msg}
   } 
}
</script>
